/**
 * Header - 应用头部组件
 * 显示当前会话标题，提供创建新会话和清空会话功能
 */
import React from 'react';
import { Menu, Plus, Trash2 } from 'lucide-react';
import { useChatContext } from '../ctx/ChatContext';
import { motion } from "motion/react";

interface HeaderProps {
    toggleSidebar: () => void;
}

const Header: React.FC<HeaderProps> = ({ toggleSidebar }) => {
    const { currentConversation, createNewConversation, clearConversation } = useChatContext();

    return (
        <header className="p-4 bg-white/35 backdrop-blur-sm flex flex-col sm:flex-row items-center justify-between h-16">
            <div className="flex w-full text-center items-center justify-center gap-3 py-2 mb-2 sm:mb-0">
                <h1 className="font-medium text-lg truncate max-w-[200px] sm:max-w-xs">
                    {currentConversation?.title || '新对话'}
                </h1>
            </div>

            <div className="flex items-center self-end sm:self-center px-4 py-2">
                <motion.button
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                    onClick={createNewConversation}
                    className="p-2 rounded-full hover:bg-gray-100 text-gray-700"
                    aria-label="新建对话"
                >
                    <Plus size={20} />
                </motion.button>

                <motion.button
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                    onClick={clearConversation}
                    className="p-2 rounded-full hover:bg-gray-100 text-gray-700"
                    aria-label="清空对话"
                    disabled={!currentConversation || currentConversation.messages.length === 0}
                >
                    <Trash2 size={20} className={!currentConversation || currentConversation.messages.length === 0 ? "text-gray-300" : ""} />
                </motion.button>
            </div>
        </header>
    );
};

export default Header;